<template>
	<view class="zone">
		<Header title="积累贡献"></Header>
		<view class="main">
			<view class="time">{{date}}</view>
			<image class="yun" src="http://image.qxgm.site/tdz/img/public/m_yun.png" mode="widthFix"></image>
			<image class="ping1" src="http://image.qxgm.site/tdz/img/public/ping1.png" mode="widthFix"></image>
			<view class="box">
				<view class="type">
					<text class="n1">排名</text>
					<text class="n2">玩家信息</text>
					<text class="n3">今日贡献/总贡献</text>
				</view>
				<scroll-view scroll-y class="scrolllist" @scrolltolower="scnextrecord">
					<view class="list">
						<view class="item" v-for="(item,index) in list" :key="index">
							<view class="flex">
								<view class="header">
									<image :src="item.avatar" mode="widthFix" />
								</view>
								<view class="worf">
									<view class="phone">{{item.username}}</view>
									<view class="vode">ID:{{item.invite_code}}</view>
									<view class="linkbtn">好友:{{item.from_level == 1 ? '直推' : '间推'}}</view>
								</view>
							</view>
							<view class="center">
								<view class="lve">今日:<text>{{item.number}}</text></view>
								<view class="zhan">
									总贡献{{item.number}}
								</view>
							</view>
						</view>
					</view>
					<view class="empty" v-if="list.length==0">
						<image src="http://img.cpgm.cc/xfmz/static/public/empty.png" mode="widthFix" />
						暂无数据
					</view>
					<view class="more" v-else>
						{{loadText}}
					</view>
				</scroll-view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [],
				page: 1,
				max_page: '',
				loadText: '没有更多了',
				date: ''
			}
		},
		onLoad(option) {
			this.date = option.date
			this.daycontribute()
		},
		methods: {
			async daycontribute() {
				let res = await this.$http.index.daycontribute({
					page: this.page,
					date: this.date
				})
				if (res.code == 1) {
					this.list = [...this.list, ...res.data.data]
					this.max_page = res.data.last_page
					if (this.page > this.max_page || this.page == this.max_page) this.loadText = '没有更多了';
				} else {
					this.$u.toast(res.msg)
				}
			},
			scnextrecord() {
				if (this.page >= this.max_page) {
					this.loadText = '没有更多了'
					return;
				}
				this.loadText = '努力加载中';
				this.page = ++this.page;
				this.daycontribute()
				setTimeout(() => {
					if (this.page > this.max_page || this.page == this.max_page) this.loadText = '没有更多了';
					else this.loadText = '努力加载中';
				}, 500)
			},
		}
	}
</script>

<style lang="less">
	.zone {
		min-height: 100vh;
		background: url(http://image.qxgm.site/tdz/img/public/p_bg.png) no-repeat;
		background-size: 100% auto;
	}

	.main {
		width: 100%;
		position: relative;
		margin-top: 10px;

		.time {
			position: absolute;
			left: 0;
			right: 0;
			text-align: center;
			top: -4%;
			color: #ffffff;
		}

		.yun {
			position: absolute;
			top: -3%;
			left: 0;
			width: 44%;
			z-index: 9;
		}

		.ping1 {
			width: 100%;
			display: flex;
		}

		.box {
			position: relative;
			height: calc(100vh - 97px);
			overflow-y: scroll;
			background: url(http://image.qxgm.site/tdz/img/public/ping2.png);
			background-size: 100% auto;
			padding: 10px 6px 0;
			border-bottom: 6px solid #b0a3a1;

			.type {
				display: flex;
				align-items: center;
				background: #e2c8d0;
				font-size: 14px;
				color: #333;
				line-height: 36px;
				background: url(http://image.qxgm.site/tdz/img/rank/mg-11.png) no-repeat;
				background-size: 100% 100%;
				margin-bottom: 3px;

				.n1 {
					display: inline-block;
					width: 15%;
					text-align: center;
				}

				.n2 {
					margin-left: 10%;
					width: 40%;
				}

				.n3 {
					display: inline-block;

				}
			}

			.scrolllist {
				height: calc(100vh - 152px);
				overflow-y: scroll;
			}
		}
	}

	.item {
		display: flex;
		align-items: center;
		justify-content: space-between;
		background: url(http://image.qxgm.site/tdz/img/xianyu/mg-06.png) no-repeat;
		background-size: 100% 100%;
		padding: 9px 5px;
		box-sizing: border-box;
		margin: 3px;
	}

	.header {
		width: 45px;
		margin-left: 6px;
		margin-right: 6px;

		image {
			width: 100%;
			border-radius: 50%;
		}
	}

	.worf {
		position: relative;
		display: flex;
		flex-direction: column;
		justify-content: center;
		font-size: 13px;

		.linkbtn {
			width: 75px;
			height: 20px;
			background: linear-gradient(0deg, #5E2352, #60344B);
			border-radius: 10px;
			opacity: 0.39;
			color: #FFF4D5;
			font-size: 12px;
			line-height: 21px;
			text-align: center;
		}
	}

	.flex {
		width: 50%;
		display: flex;
		align-content: center;

		.lv {
			display: flex;
			align-items: center;
			justify-content: center;

			image {
				width: 33px;
			}

			text {
				display: inline-block;
				width: 33px;
				font-size: 15px;
				font-weight: 500;
				text-align: center;
			}

		}
	}

	.center {
		width: 30%;
		text-align: center;

		text {
			color: #FF6600;
		}
	}

	.zhan {
		width: 100%;
		font-size: 14px;
		font-weight: normal;
		color: #FF3333;
		line-height: 18px;
		background: rgba(182, 111, 113, 0.3);
		border-radius: 10px;
		margin-top: 5px;
	}
</style>